<template>  
    <div id="my">
      <img src="../assets/my_bj3.png" alt="" style="width:100%;height:4.62rem">
      <div class="my" @click="information">
        <h3>个人中心</h3>
        <!-- <img src="../assets/pyq.png" alt="" style="width:1.24rem;border-radius:50%;"> -->
        <img :src="userInfo.photo" alt="" style="width:1.24rem;height:1.24rem;border-radius:50%;">
        <p class="my_size">{{ userInfo.name }}</p>
        <p class="my_depName">{{ userInfo.hotelName }} <span> {{ userInfo.depName }}</span> </p>
      </div>
      <div class="my_tab tab_bt" @click="Recommend">
          <img class="img" src="../assets/my_ request.png" alt="" style="width:.32rem">
          <span class="tab_title">邀请有奖</span>
          <img class="tab_right" src="../assets/my_right.png" alt="">
      </div>
      <div class="my_tab" @click="Personal" v-if="achievementsResponse.targetNumber != null">
          <img class="img" src="../assets/my_personal.png" alt="" style="width:.36rem">
          <div class="tab_border">
            <span>个人绩效</span>
            <img src="../assets/my_right.png" alt="">
          </div>          
      </div>
      <div class="my_tab tab_bt" @click="Department" v-if="deptsResponse.completeMember !=null">
          <img class="img" src="../assets/my_department.png" alt="" style="width:.36rem">
          <span class="tab_title">部门绩效</span>
          <img class="tab_right" src="../assets/my_right.png" alt="">
      </div>
      <div class="my_tab tab_bt" @click="SubstituteBooking">
          <img class="img" src="../assets/Valet.png" alt="" style="width:.32rem">
          <span class="tab_title">代客预定</span>
          <img class="tab_right" src="../assets/my_right.png" alt="">
      </div>
      <!-- <card :header="{title: $t('推荐有礼')}" @click.native="Recommend">
        <div slot="content" class="card-demo-flex card-demo-content01">          
          <div class="vux-1px-r">
            <span>我邀请的会员</span>
            <p class="font">{{ number }}人</p>            
          </div>
          <div class="vux-1px-r">
            <span>累计收益</span>
            <p class="font">￥{{ sumProfit }}</p>           
          </div>
          <div class="vux-1px-r">
            <span>剩余收益</span>
            <p class="font">￥{{ profit }}</p>           
          </div>
        </div>
      </card> -->
      <!-- <card :header="{title: $t('个人绩效目标')}" @click.native="Personal" v-if="achievementsResponse.targetNumber != null"> -->
      <!-- <card :header="{title: $t('个人绩效目标')}" @click.native="Personal">
        <div slot="content" class="card-demo-flex card-demo-content01">
          <div class="vux-1px-r">
            <span>拉新量</span>
               <div class="font">
                 {{ achievementsResponse.doneNumber }}位 完成 &nbsp;
                 {{(achievementsResponse.doneNumber /achievementsResponse.targetNumber)*100 }}%
               </div>
          </div>
          <div class="vux-1px-r">
            <span v-if="achievementsResponse.orderType==1">订单额</span>
            <span v-if="achievementsResponse.orderType==2">订单量</span>
            <div class="font" v-if="achievementsResponse.orderType == 1">
              ￥{{ achievementsResponse.doneOrderNumber}} 
              完成&nbsp;{{ achievementsResponse.doneOrderNumber }}%
            </div>
            
            <div class="font" v-if="achievementsResponse.orderType == 2">
              ￥{{ Math.floor(achievementsResponse.doneAmount*100)/100}}
              完成&nbsp;{{ achievementsResponse.targetAmount == 0?0:((achievementsResponse.doneAmount / achievementsResponse.targetAmount)*100).toString().substring(0,4) }} %
            </div>
          </div>
        </div>
      </card> -->
      <!-- <card :header="{title: $t('部门绩效目标')}" @click.native="Department" v-if="deptsResponse.completeMember !=null"> -->
      <!-- <card :header="{title: $t('部门绩效目标')}" @click.native="Department">
        <div slot="content" class="card-demo-flex card-demo-content01">
          <div class="vux-1px-r">
            <span>拉新量</span>
           <div class="font"> {{ deptsResponse.doneNumber}}位  完成&nbsp;{{ Math.floor((deptsResponse.doneNumber /deptsResponse.targetNumber)*100*100)/100}}%</div>
          </div>
          <div class="vux-1px-r">
            <span>订单量</span>
            <div class="font" v-if="deptsResponse.orderType == 1">
              ￥{{ deptsResponse.doneOrderNumber}}
              完成&nbsp;{{ deptsResponse.doneOrderNumber }}%
            </div>
            <div class="font" v-if="deptsResponse.orderType == 2">
              ￥{{ deptsResponse.doneAmount}}
              完成&nbsp;{{ deptsResponse.targetAmount ==0?0:Math.floor((deptsResponse.doneAmount / deptsResponse.targetAmount)*100*100)/100 }}%
            </div>
          </div>
        </div>
      </card> -->
  </div>
</template>
<script>
import { Card } from "vux";
import { getPersonalInfo } from "@/service/home.js";
import AxiosIns from "@/service/axiosConfig.js";
import axios from "axios"; // 引入axios
export default {
  components: {
    Card
  },
  data() {
    return {
      userInfo: "",
      token: sessionStorage.getItem("token"),
      achievementsResponse: "",
      deptsResponse: "",
      number: "",
      profit: "",
      sumProfit: "",
      personal_Number: ""
    };
  },
  created() {
    this._getPersonalInfo();
  },
  mounted() {
    this._getPersonalInfo();
    this._setToken();
  },
  methods: {
    _setToken() {
      if (this.token) {
        AxiosIns.defaults.params.token = this.token;
      }
    },
    _getPersonalInfo() {
      getPersonalInfo().then(res => {
        this.userInfo = res.data.userInfo;
        this.achievementsResponse = res.data.achievementsResponse;
        this.deptsResponse = res.data.deptsResponse;
        this.number = res.data.number;
        this.profit = res.data.profit;
        this.sumProfit = res.data.sumProfit;
        this.personal_Number =
          this.achievementsResponse.doneAmount /
          this.achievementsResponse.targetAmount;
        localStorage.setItem("hotelName", res.data.userInfo.hotelName);
      });
    },
    //推荐有礼
    Recommend() {
      window.location.href = "/my/recommend";
    },
    //个人绩效目标
    Personal() {
      // this.$router.push("/my/Personal");
      window.location.href = "/my/Personal";
    },
    //部门绩效目标
    Department() {
      // this.$router.push("/my/Department");
      window.location.href = "/my/Department";
    },
    //代客预定
    SubstituteBooking() {
      window.location.href = "/my/SubstituteBooking/index";
    },
    information() {
      this.$router.push("/my/MyInformation");
    }
  }
};
</script>
<style scoped lang="less">
@import "~vux/src/styles/1px.less";
#my {
  .my {
    position: absolute;
    top: 0;
    text-align: center;
    width: 100%;
    color: #fff;
    h3 {
      font-size: 0.36rem;
      margin-top: 0.64rem;
      height: 0.34rem;
      line-height: 0.34rem;
      margin-bottom: 0.5rem;
    }

    .my_size {
      font-size: 0.36rem;
      margin: 0.19rem 0;
      height: 0.34rem;
      line-height: 0.34rem;
      font-family: PingFang-SC-Bold;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }
    .my_depName {
      height: 0.23rem;
      font-size: 0.24rem;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 0.24rem;
    }
  }
  .my_tab {
    width: 7.5rem;
    height: 1rem;
    background: rgba(255, 255, 255, 1);
    padding: 0 0.25rem;
    .img {
      width: 0.36rem;
      height: 0.32rem;
      float: left;
      margin: 0.34rem 0;
    }
    .tab_title {
      height: 0.28rem;
      line-height: 0.28rem;
      font-size: 0.3rem;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      color: rgba(0, 0, 0, 1);
      float: left;
      margin: 0.36rem 0 0.35rem 0.25rem;
    }
    .tab_right {
      width: 0.13rem;
      height: 0.23rem;
      margin: 0.38rem 0;
      float: right;
    }
    .tab_border {
      width: 6.6rem;
      float: left;
      span {
        height: 0.28rem;
        line-height: 0.28rem;
        font-size: 0.3rem;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: rgba(0, 0, 0, 1);
        float: left;
        margin: 0.36rem 0 0.35rem 0.25rem;
      }
      img {
        width: 0.13rem;
        height: 0.23rem;
        margin: 0.38rem 0;
        float: right;
      }
    }
  }
  .tab_bt {
    margin-bottom: 0.1rem;
  }
  .tab_border {
    border-bottom: 1px solid rgba(243, 243, 243, 1);
  }
  // .weui-panel {
  //   .font {
  //     font-size: 0.3rem;
  //     color: #647182;
  //   }
  // }
}
</style>
